<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day3-从数据库获取列表</title>

  <link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">

<style type="text/css">

</style>
</head>
<body>


<div id="app">


<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">添加品牌</h3>
  </div>

  <div class="panel-body form-inline" >
 <!--    因为使用数据库，数据库自动递增id，所以不加id
   <label for="">
     id: <input type="text" v-model="id">
   </label>
  -->
      <label for="">
        name: <input type="text" v-model="name" class="form-control">
      </label>

      <input type="button" value="添加" class="btn btn-primary">

  </div>

</div>






<table class="table table-bordered table hover table-striped">

    <thead>
      <tr>
        <th>Id</th>
        <th>name</th>
        <th>Ctime</th>
        <th>Operation</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.Ctime | timer }}</td>
        <td>
            <a href="">删除</a>
        </td>
      </tr>
    </tbody>

</table>
</div>




<!-- 
http://www.liulongbin.top:3005/api/getprodlist/
http://www.liulongbin.top:3005/api/addproduct/
http://www.liulongbin.top:3005/api/delproduct/
 -->



<br>
<script src="vue-resource.min.js"></script>
<script src="vue.js"></script>
<script type="text/javascript">
  



var app = new Vue({
  el: '#app',

  data: { 
        name:"",

        list:[ 
            {  id:1,name:'五菱宏光',  Ctime:new Date()  },
            {  id:2,name:'劳斯莱斯',  Ctime:new Date()  }
        ]
          
    
  },
    
  //当app实例的data和methods初始化完成后，实例就会自动执行 created()这个生命周期函数
  created(){
    // this.AllList()//不成功，待测试
   alert("生命周期方法不成功，待测试")
  },



  methods:{
      add(){
      },

      AllList(){

        this.$http.get("http://www.liulongbin.top:3005/api/getprodlist/").then(result=>{
          //通过$http获取的数据都在result.body之中
          var result = result.body
          if(result.status === 0){
              this.list= result.message
          }else{
              alert("获取数据失败")
          }
        })

      },
    


  },




  filters:{
    timer:function(dataStr,patter= ""){
        var dt = new Date()

        var nian = dt.getFullYear()
        var yue  = dt.getMonth()
        var ri   = dt.getDate()
        var week = dt.getDay()

        return ` ${nian}年-${yue}月-${ri}日 星期${week} ---私有过滤器`
    }//timer私有过滤器结束

}





})




</script>


	
</body>
</html>